<!--
 * @Date: 2025-07-19 01:40:32
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-11-16 22:37:58
 * @FilePath: /admin-vue/src/views/admin/system/user/index.vue
-->
<script setup lang="tsx">
import { $t } from '@/locales'
import dayjs from 'dayjs'
import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
import UserOperateModal from './modules/user-operate-modal.vue'
import UserRoleOperateModal from './modules/user-role-operate-modal.vue'
import { userGenderOptions, userGenderRecord } from '@/constants/business'
import { translateOptions } from '@/utils/common'

const { loading, collection, load, params, del } = useUser()
const { bool: visible, setTrue: openModal } = useBoolean()
const { bool: transferVisible, setTrue: openTransferModal } = useBoolean()

const modalType = ref<ModalType>('add')

const id = ref(0)

const handleAdd = () => {
  modalType.value = 'add'
  openModal()
}

const handleEdit = (rowId: number) => {
  id.value = rowId
  modalType.value = 'edit'
  openModal()
}

const handleRoleTransfer = (rowId: number) => {
  id.value = rowId
  openTransferModal()
}

const columns = computed<TableColumns<UserModel>>(() => [
  { type: 'selection', fixed: 'left' },
  {
    title: $t('page.system.user.username'),
    key: 'username',
    width: 100,
    ellipsis: { tooltip: true },
  },
  {
    title: $t('page.system.user.real_name'),
    key: 'real_name',
    width: 100,
    ellipsis: { tooltip: true },
  },
  { title: $t('page.system.user.name'), key: 'name', width: 100, ellipsis: { tooltip: true } },
  {
    title: $t('page.system.user.gender'),
    key: 'gender',
    width: 95,
    filter: true,
    filterOptions: translateOptions(userGenderOptions),
    render: (row) => {
      if (row.gender === null) {
        return null
      }
      const label = $t(userGenderRecord[row.gender])
      return <NTag>{label}</NTag>
    },
  },
  { title: $t('page.system.user.mobile'), key: 'mobile', width: 160 },
  { title: $t('page.system.user.email'), key: 'email', width: 160, ellipsis: { tooltip: true } },
  {
    title: $t('common.createdDate'),
    key: 'created_at',
    width: 150,
    render: (row) => dayjs(row.created_at).format('YYYY-mm-DD HH:mm'),
  },
  {
    title: $t('common.updatedDate'),
    key: 'updated_at',
    width: 150,
    render: (row) => dayjs(row.updated_at).format('YYYY-mm-DD HH:mm'),
  },
  {
    title: $t('common.operate'),
    key: 'action',
    width: 150,
    fixed: 'right',
    render(row) {
      return (
        <NSpace justify={'center'}>
          <NButton size={'small'} text type="primary" onClick={() => handleRoleTransfer(row.id!)}>
            {$t('modal.role')}
          </NButton>
          <NButton size={'small'} text type="primary" onClick={() => handleEdit(row.id)}>
            {$t('common.edit')}
          </NButton>
          <NPopconfirm onPositiveClick={() => del(row.id)}>
            {{
              default: () => $t('common.confirmDelete'),
              trigger: () => (
                <NButton size={'small'} text type="error">
                  {$t('common.delete')}
                </NButton>
              ),
            }}
          </NPopconfirm>
        </NSpace>
      )
    },
  },
])
</script>

<template>
  <main class="h-full">
    <ad-data-table
      :columns="columns"
      :collection="collection"
      :load="load"
      :params="params"
      :loading="loading"
    >
      <template #button>
        <NButton type="primary" @click="handleAdd">
          <template #icon>
            <icon-gridicons-add-outline />
          </template>
          {{ $t('common.add') }}
        </NButton>
      </template>
    </ad-data-table>
    <UserOperateModal v-model:visible="visible" :type="modalType" :id="id" :load="load" />
    <UserRoleOperateModal v-model:visible="transferVisible" :id="id" />
  </main>
</template>

<style scoped></style>
